<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!--jquery-->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <!--easyUI-->
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <!--js-->
    <script>
        <!--模拟easyui给组件添加样式-->
        $(function () {
            $("#myTree").tree({
                url:'tree.json',
                lines:true,
                animate:true,
                dnd:true,
                cascadeCheck:true,
                onClick:function (node) {
                    if (node.children) {
                        return; //如果有子菜单则不打开选项卡
                    }
                    //.获取选项卡索引
                    var exists = $("#myTabs").tabs('exists',node.text);
                    if (exists) {
                        //存在选中选项卡
                        $("#myTabs").tabs("select",node.text);
                    }else{
                        //添加选项卡
                        $("#myTabs").tabs("add",{
                            title:node.text,
                            content:'<iframe src="'+node.url+'" width="100%" height="100%" frameborder="0"></iframe>',
                            closable:true
                        })
                    }
                }
            });
            $("#myTabs").tabs({
                fit:true,
                border:false,
                tools:[{
                    iconCls:"icon-emoji1",
                    handler:function () {
                        //获取所有的选项卡n
                        var tabs = $("#myTabs").tabs('tabs');

                        for(var i=tabs.length;i>=0;i--){
                            //根据索引删除选项卡
                            $("#myTabs").tabs('close',i);
                        }
                    }
                }],
                selected:0
            });
        })


    </script>

    <div id="cc" class="easyui-layout" fit="true">
        <div data-options="region:'north'" style="height:100px;">
            <h3 align="center">客户管理系统</h3>
        </div>
        <div data-options="region:'south'" style="height:30px;">
            <p align="center">版权声明</p>
        </div>
        <div data-options="region:'west'" style="width:190px;">

            <div id="aa" class="easyui-accordion" fit="true">
                <div title="菜单" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                    <ul id="myTree"></ul>
                </div>
                <div title="待办事务" data-options="iconCls:'icon-reload'" style="padding:10px;">
                    待办事务
                </div>
                <div title="公司公告">
                    公司公告
                </div>
            </div>
        </div>
        <div data-options="region:'center'" style="padding:5px;background:#eee;">
            <!--选项卡-->
            <div id="myTabs">
                <div title="欢迎界面">欢迎~</div>

            </div>
        </div>
    </div>

</body>
</html>